<template>
  <a-layout style="height: 100%" >
    <a-layout-sider v-model:collapsed="collapsed" width="250" class="sider"
                    :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }"
    >

<!--  侧边栏的头    -->
      <a-card style="height: 65px" :body-style="{padding: ' 20px 8px 15px 8px'}">
        <a-row v-if="collapsed == false">
          <a-col :span="3">
            <a-image src="/logo.png" :preview="false"></a-image>
          </a-col>
          <a-col :span="20" :offset="1">
            <span style="font-size: 17px;margin-top: 6px;color: #469BFF">社区志愿者管理服务平台</span>
          </a-col>
        </a-row>

        <div v-if="collapsed == true" align="center">
            <a-image src="/logo.png" :preview="false" style="width: 25px;margin-left: 10px"></a-image>
        </div>
      </a-card>

<!--  侧边栏导航    -->
      <div style="height: 10px;"></div>
      <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          style="width: 100%"
          mode="inline"
          class="menu"
      >
        <a-menu-item style="height: 45px;" key="/account/workplace">
          <template #icon>
            <dashboard-outlined style="font-size: 20px" />
          </template>
          <router-link to="/account/workplace">
            <span class="menuTitle">工作台</span>
          </router-link>
        </a-menu-item>

        <a-sub-menu key="userNav">
          <template #icon>
            <user-outlined style="font-size: 20px"/>
          </template>
          <template #title><span class="menuTitle">用户管理</span></template>
          <a-menu-item v-for="item in leftNav.userNav" :key="item.path" style="height: 45px;" >
            <router-link :to="item.path">
              <span class="menuSub">{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="newsNav">
          <template #icon>
            <mail-outlined style="font-size: 20px" />
          </template>
          <template #title><span class="menuTitle">通知管理</span></template>
          <a-menu-item v-for="item in leftNav.newsNav" :key="item.path" style="height: 45px;">
            <router-link :to="item.path">
              <span class="menuSub">{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="goodsNav">
          <template #icon>
            <mac-command-outlined style="font-size: 20px" />
          </template>
          <template #title><span class="menuTitle">物资管理</span></template>
          <a-menu-item v-for="item in leftNav.goodsNav" :key="item.path" style="height: 45px;">
            <router-link :to="item.path">
              <span class="menuSub">{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="activityNav">
          <template #icon>
            <schedule-outlined style="font-size: 20px"/>
          </template>
          <template #title><span class="menuTitle">活动管理</span></template>
          <a-menu-item v-for="item in leftNav.activityNav" :key="item.path" style="height: 45px;" >
            <router-link :to="item.path">
              <span class="menuSub">{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="teamNav">
          <template #icon>
            <team-outlined style="font-size: 20px" />
          </template>
          <template #title><span class="menuTitle">团队管理</span></template>
          <a-menu-item v-for="item in leftNav.teamNav" :key="item.path" style="height: 45px;">
            <router-link :to="item.path">
              <span class="menuSub">{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="fileNav">
          <template #icon>
            <file-outlined style="font-size: 20px"/>
          </template>
          <template #title><span class="menuTitle">文件管理</span></template>
          <a-menu-item v-for="item in leftNav.fileNav" :key="item.path" style="height: 45px;" >
            <router-link :to="item.path">
              <span class="menuSub">{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>

      </a-menu>
    </a-layout-sider>

<!-- 右边模块（头、身体、尾）    -->
    <a-layout :style="{ marginLeft: collapsed == true ? '80px' : '250px' }">
      <a-layout-header class="header" style="position: fixed;z-index: 2"
                       :style="{width: collapsed == true ? 'calc(100% - 80px)' : 'calc(100% - 250px)'}">
        <a-card style="height: 65px;line-height: 65px" :body-style="{padding: '0'}">
          <a-row>
            <a-col :span="4">
              <a-button v-if="collapsed == false" @click="collapsed = !collapsed;openKeys = collapsed ? [] : preOpenKeys;" type="text" style="height: 65px;width: 80px">
                <menu-fold-outlined style="font-size: 20px" />
              </a-button>
              <a-button v-if="collapsed == true" @click="collapsed = !collapsed" type="text" style="height: 65px;width: 80px">
                <menu-unfold-outlined style="font-size: 20px" />
              </a-button>
            </a-col>
            <a-col :span="4" :offset="16">
              <div style="float: right">
                <a-dropdown :overlayStyle="{paddingTop: '10px'}">
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <div @click="quit" style="color: #505659;font-size: 15px" ><logout-outlined style="font-size: 14px"/>&nbsp;&nbsp;&nbsp;退出登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                      </a-menu-item>
                    </a-menu>
                  </template>
                  <a class="ant-dropdown-link" @click.prevent>
                    <a-image style="width: 30px;height: 30px;margin-top: -3px;border-radius: 50%" :preview="false" :src="userAvatar"></a-image>
                    <span style="color: black;font-size: 18px;margin-left: 5px;padding-right: 15px">{{userName}}</span>
                  </a>
                </a-dropdown>
              </div>
            </a-col>
          </a-row>

          <div style="height: 10px;"></div>
          <a-tabs v-model:activeKey="pageActiveKey" hide-add type="editable-card"
                  @change="clickTab(pageActiveKey)" @edit="onEdit">
            <a-tab-pane v-for="pane in panes" :key="pane.key"
                        :tab="pane.title" :closable="pane.closable"
            >
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-layout-header>

<!--  身体-->
      <a-layout-content class="content">
        <div style="background-color: #f0f2f5">
          <router-view/>
        </div>
      </a-layout-content>


      <a-layout-footer class="footer">Footer</a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import {reactive, ref, toRefs, watch} from "vue";
import {DashboardOutlined,TeamOutlined,MenuFoldOutlined,MenuUnfoldOutlined ,LogoutOutlined,ScheduleOutlined,FileOutlined,
         MailOutlined,MacCommandOutlined,UserOutlined} from "@ant-design/icons-vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {logout} from "@/utils/user";

export default {
  components: {
    LogoutOutlined,
    MailOutlined,
    DashboardOutlined,
    TeamOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    ScheduleOutlined,
    FileOutlined,
    MacCommandOutlined,
    UserOutlined
  },
  setup(){

    const state = reactive({
      collapsed: false,      //控制侧边栏是否隐藏
      selectedKeys: [],
      pageActiveKey: '',    //tap变换
      openKeys: [],     //当前展开的数组
      preOpenKeys: [],
      userAvatar: '',      //用户头像
      userName: ''
    })

    const leftNav = reactive({
      userNav: [
        {
          name: '用户列表',
          path: '/account/userList'
        },
        {
          name: '个人设置',
          path: '/account/mySetting'
        }
      ],
      activityNav: [
        {
          name: '活动列表',
          path: '/account/activityList'
        }
      ],
      fileNav: [
        {
          name: '文件列表',
          path: '/account/fileList'
        }
      ],
      newsNav: [
        {
          name: '通知列表',
          path: '/account/newsList'
        },
        {
          name: '新增通知',
          path: '/account/addNews'
        }
      ],
      goodsNav: [
        {
          name: '物资列表',
          path: '/account/goodsList'
        },
        {
          name: '新增物资',
          path: '/account/addGoods'
        }
      ],
      teamNav: [
        {
          name: '团队列表',
          path: '/account/teamList'
        },
      ]
    })

    const panes = ref([
        {
          title: '工作台',
          key: '/account/workplace',
          closable: false,
        },
    ]);

    const route = useRoute()
    const router = useRouter()
    state.selectedKeys.push(route.path)
    state.pageActiveKey = route.path
    const store = useStore()

    state.userAvatar = store.state.userAvatar
    state.userName = store.state.userName

    function openKeys(){
      if (route.path != '/account/workplace'){
        let isRepeat = false
        panes.value.forEach(e => {
          if (e.key == route.path){
            isRepeat = true
          }
        })
        if (isRepeat == true){
          state.pageActiveKey = route.path
        }else{
          let myIyem = {
            title: route.meta.title,
            key: route.path,
            closable: true,
          }
          panes.value.push(myIyem)
          state.pageActiveKey = myIyem.key
        }

        // panes.value.push({
        //   title: route.meta.title,
        //   key: route.path,
        //   closable: true,
        // })
        // state.pageActiveKey = route.path

        for (let i in leftNav){
          leftNav[i].forEach((e,index) =>{
            if (e.path == route.path){
              state.openKeys = []
              state.preOpenKeys = []
              state.preOpenKeys.push(i)
              state.openKeys.push(i)
            }
          })
        }

      }else{
        state.openKeys = []
        state.preOpenKeys = []
        state.pageActiveKey = '/account/workplace'
        state.preOpenKeys.push('userNav')
        state.openKeys.push('userNav')
      }
    }
    openKeys()

    watch(()=> route.path,() => {
      // console.log(1)
      state.selectedKeys[0] = route.path
      openKeys()
    })

    //退出登录
    const quit = function (){
      logout().then(res=> {
        console.log(res)
        if (res.status == 200){
          sessionStorage.removeItem("vuex");
          router.push('/login')
        }
      })
    }

    //点击tab
    const clickTab = function (item){
      router.push(item)
      state.selectedKeys[0] = item
    }

    //×掉标签页
    const onEdit = function (targetKey, action){
      console.log(targetKey,action)
      if (targetKey == state.pageActiveKey){
        state.pageActiveKey = '/account/workplace'
        state.selectedKeys[0] = '/account/workplace'
        router.push('/account/workplace')
        panes.value = panes.value.filter(item => item.key != targetKey)
      }else{
        panes.value = panes.value.filter(item => item.key != targetKey)
      }
    }

    return{
      ...toRefs(state),
      clickTab,
      quit,
      onEdit,
      panes,
      leftNav,

    }
  }
}
</script>

<style scoped>
.sider{
  background: #FFFFFF;
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
}

.header{
  height: 116px;
  background: #FFFFFF;
  padding: 0px;
}

.content{
  background-color: rgb(240,242,245);
  margin-top: 116px;
  z-index: 1;
}

.contentTitle{
  background: #FFFFFF;
}

.menuTitle{
  font-size: 15px;
}
.menuSub{
  margin-left: 10px;
  font-size: 14px;
}

.footer{
  background-color: rgb(240,242,245);
}
.navTitle{
  color: #33332E;
}
.navTitle:hover{
  color: #469BFF;
}
</style>

<style>
.ant-tabs-top > .ant-tabs-nav{
  margin: 0;
}

.header .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active{      /* tab的背景颜色 */
  background-color: rgb(24,144,255);
}

.header .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{               /* 选中tab的字体 */
  color: white;
}

.header .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-remove{             /* 选择tab的删除标 */
  color: white;
}

.header .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab{
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.menu .ant-menu-sub.ant-menu-inline{
  background-color: white;
}

.ant-menu-inline .ant-menu-item{
  margin-top: 0;
}
</style>

<style>

</style>
